<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div style="width: 100%; height: 100%">
    <div [ngStyle]="{ width: canvasWidth, height: canvasHeight + 'px' }">
        <sp-image-container
            fxFlex="100"
            *ngIf="imagesRoutes.length > 0"
            [imageSrc]="imagesRoutes[imagesIndex]"
            [canvasWidth]="canvasWidth"
            [canvasHeight]="canvasHeight"
        >
        </sp-image-container>
    </div>
    <div
        [ngStyle]="{ width: '100%', height: imagePreviewHeight + 'px' }"
        fxLayout="row"
    >
        <sp-image-bar
            fxFlex="100"
            [imagesRoutes]="imagesRoutes"
            [selectedIndex]="imagesIndex"
            [enableShortCuts]="true"
            [imagePreviewHeight]="imagePreviewHeight"
            (indexChange)="handleImageIndexChange($event)"
        >
        </sp-image-bar>
    </div>
</div>
